import styled from 'styled-components';

export const StyledTable = styled.table`
  width: 100%;
  table-layout: fixed;
  
  th {
    white-space: nowrap;
    text-align: center;
    overflow: visible;
    padding: 8px 12px;
    background: #f5f5f5;
    position: sticky;
    top: 0;
    min-width: fit-content;
  }
  
  td {
    text-align: center;
    padding: 8px 12px;
  }
`;

export const TableContainer = styled.div`
  width: 100%;
  height: 100%;
  overflow-x: auto;
`;

export const HeaderCell = styled.th`
  white-space: nowrap;
  text-align: center;
  overflow: visible;
  min-width: fit-content;
  padding: 8px 12px;
  font-size: 18;
`;

export const HeaderContent = styled.div`
  display: inline-block;
  width: 100%;
`;